<template>
    <div class="nsfxbox">
        <div class="title">农事统计</div>
        <ul class="nstjbox">
            <li><b>{{data1.plantCount}}</b><p>种植计划</p></li>
            <li><b>{{data1.taskTotalCount}}</b><p>农事任务</p></li>
            <li><b>{{data1.daichuliTaskCount}}</b><p>待处理</p></li>
            <li><b>{{data1.yichuliTaskCount}}</b><p>已处理</p></li>
            <li><b>{{data1.yiyanqiTaskCount}}</b><p>已延期</p></li>
            <li><b>{{data1.yiquxiaoTaskCount}}</b><p>已取消</p></li>
        </ul>
        <div class="title">长势情况对比</div>
        
        <div class="dbbox" style="height: 143px;">
            <div class="dbItem" v-for="(dt,index) in data2" :key="dt.operationYear">
                <template v-if="index<3">
                    <label>{{dt.operationYear}}年</label>
                    <div class="ltbox">
                        <el-tooltip placement="top" v-for="dt2 in dt.growSituationCountRsps">
                            <template #content>共计{{dt2.num}}次，1块地<br />发生时间：{{dt2.operationTimes}}</template>
                            <div class="zqxx" v-if="dt2.growSituationName=='长势良好' || dt2.growSituationName=='收割'" style="background-color: #48b27a;">
                                {{dt2.growSituationName}}
                            </div>
                            <div class="zqxx" v-else-if="dt2.growSituationName=='虫害侵袭' || dt2.growSituationName=='烧叶症状' || dt2.growSituationName=='病害感染'" style="background-color: #cb3535;">
                                {{dt2.growSituationName}}
                            </div>
                            <div class="zqxx">
                                {{dt2.growSituationName}}
                            </div>
                        </el-tooltip>  
                    </div>
                </template>
            </div>
            <div v-if="data2 && data2.length<1" style="padding:20px 0;text-align:center;color:#999">暂无数据</div>
            
            <!-- <div class="dbItem">
                <label>2022年</label>
                <el-tooltip placement="top">
                    <template #content>共计3次，5块地<br />发生时间：7.22、8.13</template>
                    <div class="zqxx">长势良好</div>
                </el-tooltip>
                <el-tooltip placement="top">
                    <template #content>共计3次，5块地<br />发生时间：7.22、8.13</template>
                    <div class="zqxx" style="background-color: #e8a411;">草害</div>
                </el-tooltip>
                <el-tooltip placement="top">
                    <template #content>共计3次，5块地<br />发生时间：7.22、8.13</template>
                    <div class="zqxx">营养不良</div>
                </el-tooltip>
                <el-tooltip placement="top">
                    <template #content>共计3次，5块地<br />发生时间：7.22、8.13</template>
                    <div class="zqxx" style="background-color: #f1310f;">病害</div>
                </el-tooltip>
                <el-tooltip placement="top">
                    <template #content>共计3次，5块地<br />发生时间：7.22、8.13</template>
                    <div class="zqxx" style="background-color: #48b27a;">病害</div>
                </el-tooltip>
            </div> -->
        </div>
    </div>
</template>
<script setup>
import {ref,onMounted} from "vue"
import {getStageTaskCount,getGrowthCompareCount} from '@/api/plant'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()

const data1 = ref({})
const data2 = ref('')

const init = (companyId,farmId)=>{
    get_stage_task_count(companyId,farmId)
    get_growth_compare_count(companyId,farmId)
}

const get_stage_task_count = (companyId,farmId)=>{
    getStageTaskCount({
        companyId,
        farmId
    }).then(res =>{
        data1.value = res.data
    })
}

const get_growth_compare_count = (companyId,farmId)=>{
    getGrowthCompareCount({
        companyId,
        farmId,
        limit:3,
        page:1
    }).then(res =>{
        data2.value = res.data
    })
}

defineExpose({init})
</script>

<style lang="scss" scoped>
.nsfxbox{
    .title{
        background-color: #ebe8ea;
        font-size: 12px; 
        padding:20px 20px 10px 20px;
        font-weight: bold;
    }
    .nstjbox{
        display: flex;
        box-sizing: border-box;
        background-color: #e8eaeb;
        padding: 20px 10px;
        margin: 0 0 20px 0;
        list-style: none;
        li{
            flex: 1;
            text-align: center;
            line-height: 24px;
            font-size: 12px;
            b{
                font-size: 12px;
            }
            &+li{
                border-left: 1px solid #b8b6b6;
            }
        }
    }
    .dbbox{
        background-color: #e8eaeb;
        padding: 20px 10px;
        box-sizing: border-box;
        overflow: hidden;
        overflow-x: auto;
        .dbItem{
            display: flex;
            align-items: center;
            box-sizing: border-box;
            &+.dbItem{
                margin: 20px 0 0 0;
            }
            label{
                flex-shrink: 0;
                margin: 0 10px 0 0;
                padding: 0 0 0 10px;
            }
            .ltbox{
                display: flex;
                flex-shrink: 0;
                flex-wrap:wrap;
            }
            .zqxx{
                flex-shrink: 0;
                height: 20px;
                line-height: 20px;
                padding: 0 5px;
                color: #fff;
                background-color: #e8a411;
                border-left: 1px solid #e8eaeb;
            }
        }
    }
}
</style>